<template>
  <el-dialog
    title="分值设置"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center"
    lock-scroll
    @close="onClose"
    append-to-body
    width="900px"
  >
    <div class="jsbos-common-layout">
      <div class="jsbos-common-layout-center" style="background-color: white">
        <div v-for="(item, i) in scoreData" :key="item.questionType">
          <el-row :gutter="16" style="padding-bottom: 10px">
            <el-col :span="3" style="font-size: 14px; line-height: 32px">
              【{{ item.questionTypeName }}】
            </el-col>
            <el-col :span="3" style="font-size: 14px; line-height: 32px">
              数量：{{ item.questions.length }}
            </el-col>
            <el-col :span="8">
              每题分值：
              <el-input-number
                v-model="item.score"
                controls-position="right"
                :step="0.1"
                :min="0.0"
                :max="100"
                @change="scoreChange(i)"
              ></el-input-number>
            </el-col>
            <el-col v-if="item.questionType == 'multiple'" :span="7">
              漏选给分：
              <el-input-number
                v-model="item.missedScore"
                controls-position="right"
                :step="0.1"
                :min="0.0"
                :max="100"
              ></el-input-number
            ></el-col>
            <el-col v-else-if="item.questionType == 'blank'" :span="7">
              评分规则：
              <el-select v-model="item.scoreType" :style="{ width: '120px' }">
                <el-option
                  v-for="(item, index) in scoreTypeOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
            <el-col v-else :span="7" style="font-size: 14px; line-height: 32px"
              >/
            </el-col>
            <el-col :span="3" style="font-size: 14px; line-height: 32px">
              共{{ item.totalScore }}分
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose" size="small">{{
        $t("common.cancelButton")
      }}</el-button>
      <el-button type="primary" @click="submit()" size="small"
        >{{ $t("common.confirmButton") }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "paperScoreSetting",
  props: {
    // questions: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      visible: false,
      scoreTypeOptions: [
        { fullName: "每空给分", id: "1" },
        { fullName: "每题给分", id: "2" },
      ],
      scoreData: [
        {
          questionType: "selectTi",
          questionTypeName: "填空题",
          questions: [],
          score: 0,
          scoreType: "2",
          missedScore: 0,
          totalScore: 0,
        },
        {
          questionType: "multiple",
          questionTypeName: "多选题",
          questions: [],
          score: 0,
          scoreType: "2",
          missedScore: 0,
          totalScore: 0,
        },
        {
          questionType: "determine",
          questionTypeName: "判断题",
          questions: [],
          score: 0,
          scoreType: "2",
          missedScore: 0,
          totalScore: 0,
        },
        {
          questionType: "blank",
          questionTypeName: "填空题",
          questions: [],
          score: 0,
          scoreType: "2",
          missedScore: 0,
          totalScore: 0,
        },
        {
          questionType: "answers",
          questionTypeName: "问答题",
          questions: [],
          score: 0,
          scoreType: "2",
          missedScore: 0,
          totalScore: 0,
        },
        {
          questionType: "cases",
          questionTypeName: "案例题",
          questions: [],
          score: 0,
          scoreType: "2",
          missedScore: 0,
          totalScore: 0,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    init(questions) {
      this.visible = true;
      if (questions) {
        console.log(questions);
        var _questions = JSON.parse(JSON.stringify(questions));
        for (let i = 0; i < _questions.length; i++) {
          var _data = _questions[i];
          if (_data.questionType == "selectTi") {
            this.scoreData[0].questions.push(_data);
          }
          if (_data.questionType == "multiple") {
            this.scoreData[1].questions.push(_data);
          }
          if (_data.questionType == "determine") {
            this.scoreData[2].questions.push(_data);
          }
          if (_data.questionType == "blank") {
            this.scoreData[3].questions.push(_data);
          }
          if (_data.questionType == "answers") {
            this.scoreData[4].questions.push(_data);
          }
          if (_data.questionType == "cases") {
            this.scoreData[5].questions.push(_data);
          }
        }
      }
    },
    scoreChange(i) {
      this.scoreData[i].totalScore =
        this.scoreData[i].questions.length * this.scoreData[i].score;
    },
    submit() {
      this.$emit("submit", this.scoreData);
      this.onClose();
    },
    onClose() {
      this.visible = false;
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
>>> .el-input-number--small {
  width: 100px;
  line-height: 30px;
}
</style>
